<!-- 分组排序 -->
<template>
  <a-modal
    :width="'80%'"
    :visible="dialogVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
    title-align="center"
  >
    <template #title> 分组排序 </template>
    <a-list :bordered="false">
      <template #header> 使用指南 </template>
      <a-list-item>1、鼠标移动到审批分组上方拖曳进行排序</a-list-item>
      <a-list-item>2、保存使新排序生效</a-list-item>
    </a-list>
    <div class="wrap">
      <a-scrollbar
        style="height: 300px; overflow: auto; border: 1px solid #ccc"
      >
        <div>
          <draggable
            class="item"
            :list="currList"
            ghost-class="ghost"
            handle=".move"
            filter=".forbid"
            :force-fallback="true"
            chosen-class="chosenClass"
            animation="300"
            :fallback-class="true"
            :fallback-on-body="true"
            :touch-start-threshold="10"
            :fallback-tolerance="10"
            :sort="true"
            itemKey="code"
          >
            <template #item="{ element }">
              <a-space direction="vertical" class="item-box" :size="20" fill>
                <div class="item-box-container">
                  <icon-font
                    type="icon-a-Dragtuozhuai"
                    :size="25"
                    class="move"
                    style="position: relative; margin-left: 10px; top: 5px"
                  ></icon-font>
                  <span
                    :style="{
                      marginLeft: '20px'
                    }"
                  >
                    {{ element.title }}
                  </span>
                </div>
              </a-space>
            </template>
          </draggable>
        </div>
      </a-scrollbar>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import Draggable from 'vuedraggable';
import cloneDeep from 'lodash.clonedeep';

const props = withDefaults(
  // 参数说明
  defineProps<{
    visible: boolean; // 判断是否打开表头设置抽屉
    list: any;
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible', 'sortChange']);

// 判断抽屉是否显示
const dialogVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emits('update:visible', visible);
  }
});

let currList = ref(cloneDeep(props.list));

// 确认
const handleOk = () => {
  emits('sortChange', currList.value);
  dialogVisible.value = false;
};

// 取消
const handleCancel = () => {
  dialogVisible.value = false;
};
</script>

<style scoped lang="less">
.wrap {
  .item {
    &-box {
      &-container {
        // background-color: red;
        height: 50px;
        line-height: 50px;
      }
      &-container:hover {
        background-color: #f2f3f5;
      }
    }
  }
}
</style>
